<template>
	<view class="outer_box" :style="{height:height+'px'}">
		<view class="table-box">
			<view class="first">收货人</view>
			<view class="second">
				<input type="text" v-model="parameter.name" value="" placeholder="请填写姓名" placeholder-style="color:#AAAAAA;font-size: 32rpx" />
			</view>
		</view>
		<view class="table-box">
			<view class="first">联系电话</view>
			<view class="second">
				<input type="text" v-model="parameter.phone" value="" placeholder="请填写联系电话" placeholder-style="color:#AAAAAA;font-size: 32rpx" />
			</view>
		</view>
		<view class="table-box">
			<view class="first">所在地区</view>
			<view class="second">
				<!-- <view type="text">
					请选择省、市、区
				</view> -->
				<pickerAddress class="uni-input region" @change="change">{{txt}}</pickerAddress>
				<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/qianjin.png" mode=""></image>
			</view>
		</view>	
		<view class="table-box">
			<textarea v-model="parameter.address" type="text" value="" placeholder="请填写详细地址(街道、楼牌号等)"
				placeholder-style="color:#AAAAAA;font-size: 32rpx" />
		</view>
		<!-- <view class="table-box default">
			<view class="">设为默认收货地址</view>
			<view class="">
				<switch color="#FFBD66" checked @change="switch1Change"/>
				
			</view>
		</view> -->
		
		<view class="">
			<view class="btn">
				<button @tap='addAddress'>保存</button>
			
			</view>
		</view>


	</view>
</template>

<script>
	import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress'
	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				height:500,
				txt: '请选择省、市、区',
				addressList:'',
				addressNull:'',
				regionList: [],
				parameter: {
					name: '',
					phone: '',
					cityCode: '',
					address: '',
				},
				
			}
		},
		onShow() {
			// this.getAddressList()
		},
		onLoad(parameter) {
			console.log(parameter.id)
			if(parameter.id != undefined && parameter.id !=''){
				this.getAddressInfo(parameter.id)
			}
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight - uni.upx2px(0)
				}
			})
		},
		methods: {
			getAddressInfo(id) {
				this.$api.getAddressInfo({
					id: id
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(JSON.stringify(res.data.data))
						this.parameter = res.data.data
						this.txt = (res.data.data.province ==null? '': res.data.data.province)+" "+res.data.data.city+" "+res.data.data.district
			
			
					}
				})
			},
			switch1Change: function (e) {
			            console.log('switch1 发生 change 事件，携带值为', e.target.value)
			        },
			change(data) {
				this.txt = data.data.join(' ')
				this.regionList = data.data
				this.parameter.cityCode = data.data2
				console.log(JSON.stringify(this.regionList[1]))
			},
			addAddress() {
				if (this.parameter.name == '') {
					uni.showToast({
						title: "请输入姓名",
						duration: 2000,
						icon: 'none',
					});
					return
				}
				if (this.parameter.phone == '') {
					uni.showToast({
						title: "手机号",
						duration: 2000,
						icon: 'none',
					});
					return
				}
				if (this.parameter.cityCode == '') {
					uni.showToast({
						title: "请选择地区",
						duration: 2000,
						icon: 'none',
					});
					return
				}
				if (this.parameter.address == '') {
					uni.showToast({
						title: "请输入详细地址",
						duration: 2000,
						icon: 'none',
					});
					return
				}
				if(this.parameter.id==undefined){
					this.$api.addAddress(this.parameter).then((res) => {
						if (res.data.code == 200) {
							uni.showToast({
								title: "已添加",
								duration: 1500,
							});
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								});
							}, 1700);
						}
					
					})
				}else{
					this.$api.updateAddress(this.parameter).then((res) => {
						if (res.data.code == 200) {
							uni.showToast({
								title: "已修改",
								duration: 1500,
							});
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								});
							}, 1700);
						}
					
					})
				}
				
			}

		}
	}
</script>

<style lang="less" scoped>
	.region {
		color: #9e9e9e;
	}
	// page{
	// 	background-color: #F8F8F8;
	// }
	.outer_box {
		background-color: #F8F8F8;
		display: flex;
		margin: 0;
		flex-direction: column;

		.btn {
			margin-top: 50rpx;
			button {
				width: 78%;
				height: 100upx;
				background: linear-gradient(90deg, #FF8308 0%, #FFBF69 100%);
				border-radius: 50upx;
				color: #FEFEFE;
				font-size: 32upx;
				line-height: 100upx;
			}
		}

		.first {
			flex: 1;
			text-align: center;
			color: #333333;
			font-size: 28rpx;
			font-weight: bold;
		}

		.second {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex: 4;
			font-size: 32rpx;

			view {
				color: #AAAAAA;
			}

			image {
				margin-right: 30rpx;
				width: 12rpx;
				height: 24rpx;
			}
		}
		.table-box.default{
			margin: 0 auto;
			width: 100%;
			display: flex;
			justify-content: space-between;
			view:first-child{
				margin-left: 20rpx;
				font-size: 32rpx;
				color: #333333;
				font-weight: bold;
			}
			view:last-child{
				margin-right: 20rpx;
			}
		}

		.table-box {
			display: flex;
			align-items: center;
			min-height: 120rpx;
			width: 100%;
			background-color: #fff;
			margin-bottom: 1rpx;
			border-bottom: 1rpx solid #F8F8F8;

			textarea {
				margin: 0 auto;
				width: 95%;
			}
		}

	}
</style>
